<template>
   <div class="HomeList">
    <ul>
        <li><div @click="xuangou(1,'美食')"><img src="../../../../static/img/classify_ms.png" alt="选购">美食</div></li>
        <li><div @click="xuangou(4,'母婴')"><img src="../../../../static/img/classify_my.png" alt="选购">母婴</div></li>
        <li><div @click="xuangou(14,'服饰')"><img src="../../../../static/img/classify_fs.png" alt="选购">服饰</div></li>
        <li><div @click="xuangou(16,'美妆')"><img src="../../../../static/img/classify_mz.png" alt="选购">美妆</div></li>
        <li><div @click="xuangou(1281,'鞋包')"><img src="../../../../static/img/classify_xb.png" alt="选购">鞋包</div></li>
        <li><div @click="xuangou(18,'电器')"><img src="../../../../static/img/classify_dq.png" alt="选购">电器</div></li>
        <li><div @click="xuangou(818,'家纺')"><img src="../../../../static/img/classify_jf.png" alt="选购">家纺</div></li>
        <li><div @click="xuangou(14,'水果')"><img src="../../../../static/img/classify_sg.png" alt="选购">水果</div></li>
        <li><div @click="xuangou(743,'男装')"><img src="../../../../static/img/classify_nz.png" alt="选购">男装</div></li>
        <li><div @click="xuangou(1451,'运动')"><img src="../../../../static/img/classify_yd.png" alt="选购">运动</div></li>
    </ul>
    </div>
</template>

<style lang="stylus" scoped>
.HomeList
    width 100%;
    height 4.4rem;
    background white;
    border-bottom 1px solid #f4f4f4;
    display: flex;
    justify-content: center;
    flex-direction: column;
    ul 
      margin-top .2rem;
    li
        width: 20%;
        height 2rem;
        float: left;
        margin: auto;
        div
            width: 1.2 rem;
            height: 1.2 rem;
            margin: auto;
            font-size .3rem;
            text-align center;
        img 
            display: block;
            width: 100%;
            height: 100%
            margin-bottom 6px;
</style>

<script>
export default {
  methods: {
      xuangou:function(hh,tit){
      
      this.$router.push({ path: "choose", query: {  
              cat_id:hh,
              title:tit
        } });
    },
    parts:function(){
      this.$router.push({path:"parts"})
    },
    btn:function(){
      MessageBox('', '');
    }
  }
}
</script>

